<template>
  <el-drawer
      title="审批人设置"
      v-model="state.drawer"
      destroy-on-close
      append-to-body
      :size="500"
  >
    <template #header>
      <div class="node-wrap-drawer__title">
        <label>{{ state.nodeConfig.nodeName
          }}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon
          ></label>
      </div>
    </template>
    <el-container>
      <el-main style="padding: 0 20px 20px 20px">
        <el-form label-position="top">
          <el-form-item :label="`${state.nodeConfig.type === 1? '审批人员类型':'发起人员类型'}`">
            <el-select v-model="state.nodeConfig.config001" @change="changeSelect">
              <el-option v-for="(config, index) in [{
                dictKey: 0,dictValue: '所有人'
              },{
                dictKey: 1,dictValue: '选择人员'
              }]"
                         :key="config.dictKey" :value="config.dictKey" :label="config.dictValue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="state.nodeConfig.config001 === 1" label="选择成员">
            <el-button
                type="primary"
                icon="el-icon-plus"
                round
                @click="selectHandle(1, state.nodeConfig.nodeUserList)"
            >选择人员</el-button
            >
            <div class="tags-list">
              <el-tag
                  v-for="(user, index) in state.nodeConfig.nodeUserList"
                  :key="user.id"
                  closable
                  @close="delUser(index)"
              >{{ user.name }}</el-tag
              >
            </div>
          </el-form-item>

          <div v-if="state.nodeConfig.config001 === 1 && state.nodeConfig.type == 1">
            <el-divider></el-divider>
            <el-form-item label="多人审批时审批方式">
              <el-radio-group v-model="state.nodeConfig.examineMode">
                <p style="width: 100%"><el-radio :value="1">按顺序依次审批</el-radio></p>
                <p style="width: 100%"><el-radio :value="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
                <p style="width: 100%"><el-radio :value="3">或签 (有一人审批通过即可)</el-radio></p>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="drawer = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script lang="ts" setup name="userConfig">
import {ref, onMounted, nextTick,watch,inject} from "vue";
const emits = defineEmits(['update:modelValue','update:drawerForUserConfig']);
let select: any = inject('select');
let setCustomData: any = inject('setCustomData');
const state = reactive({
  nodeConfig: {},
  drawer: false
});

const props = defineProps({
  modelValue: { type: Object, default: () => {} },
  drawer: {type: Boolean,default: false}
});

onMounted(()=>{
  state.drawer = props.drawer;
  state.nodeConfig = props.modelValue;
})

function selectHandle(type, data) {
  select(type, data);
}

function delUser(index) {
  state.nodeConfig.nodeUserList.splice(index, 1);
}

function save() {
  if(state.nodeConfig.config001 === 1){
    if(state.nodeConfig.nodeUserList.length === 0){
      $messageBox.warning('人员选择不能为空', '提示');
      return;
    }
    if(state.nodeConfig.type == 1 && !state.nodeConfig.examineMode){
      $messageBox.warning('审批方式不能为空', '提示');
      return;
    }
  }
  //塞入自定义的数据
  setCustomData(state.nodeConfig);
  state.drawer = false;
}

function changeSelect(val) {
  state.nodeConfig.setType = 1;
  if(val === 0){
    state.nodeConfig.nodeUserList = [{id: '000000',name: '所有人'}];
  }else {
    state.nodeConfig.nodeUserList = [];
  }
}

watch(
    () => props.modelValue,
    (value) => {
      state.nodeConfig = props.modelValue;
    },
    {
      deep: true,
    }
);

watch(
    () => props.drawer,
    (value) => {
      state.drawer = props.drawer;
    },
    {
      deep: true,
    }
);

watch(
    () => state.drawer,
    (value) => {
      emits('update:drawerForUserConfig', state.drawer, state.nodeConfig);
    },
    {
      deep: true,
    }
);

</script>

<style scoped>

</style>